<template>
  <el-card shadow="never" class="h-main-full">
    <el-form :model="searchForm">
      <el-row :gutter="20">
        <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="4">
          <el-date-picker v-model="searchDataTime1"
                          type="daterange"
                          value-format="YYYY-MM-DD"
                          range-separator="至"
                          unlink-panels
                          start-placeholder="开始时间"
                          end-placeholder="结束时间"
                          style="width: 240px;"
                          clearable/>
        </el-col>

        <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="3">
          <el-input v-model="iphoneId" placeholder="手机号"/>
        </el-col>

        <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="8">

          <div style="display: inline-block;margin-left: 10px">
            <el-button>查询</el-button>
            <el-button>查询</el-button>
            <el-button>查询</el-button>
          </div>
        </el-col>
      </el-row>
    </el-form>


    <el-table ref="filterTable" :data="resultsData" :header-cell-style="store.state.way.tabelheaderstyle" stripe border style="width: 100%">
      <el-table-column width="50" >
        <template #header="{ column }">
          <el-icon ref="buttonRef" v-click-outside="onClickOutside"><ArrowDown /></el-icon>
          <el-popover  ref="popoverRef"
                       :virtual-ref="buttonRef"
                       trigger="click"
                       title="名称"
                       virtual-triggering placement="bottom" >
            <el-checkbox-group v-model="checkedOptions" @change="handleCheckedData">
              <el-checkbox v-for="item in headerOptions" :label="item.value" :key="item.value" class="checkbox-line">
                {{ item.label }}
              </el-checkbox>
            </el-checkbox-group>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column type="index" label="序号"></el-table-column>
      <el-table-column prop="name" label="名称"></el-table-column>
      <el-table-column prop="test" label="测试" v-if="isShowForm.test"></el-table-column>
      <el-table-column prop="created_date" label="创建日期" v-if="isShowForm.created_date"></el-table-column>
      <el-table-column prop="last_edited_date" label="最后编辑日期" v-if="isShowForm.last_edited_date"></el-table-column>
    </el-table>
  </el-card>
</template>

<script setup>
import {
  defineEmits,
  ref,
  watchEffect,
  onMounted,
  reactive,
  provide,
  onActivated,
  onBeforeUnmount,
  shallowRef,
  nextTick
} from "vue";
import {toast} from "@/utils/util.js"
import {useStore} from 'vuex';
import {exportClick} from "@/utils/ExportExcel"
import {useRoute, useRouter} from 'vue-router'

const getRouterPath = ref();
const router = useRouter()
const store = useStore()
import {Salelist_post} from "@/api/indexHome";

const searchDataTime1 = ref([])
const cardId = ref('')
const sourStatus = ref('')
const numberId = ref('')
const machineId = ref('')
const waterId = ref('')
const checkedOptions = ref([])
const isShowForm = reactive({
  test: true,
  created_date: true,
  last_edited_date: true
})
const headerOptions = reactive([{
  label: '测试',
  value: 'test'
}, {
  label: '创建日期',
  value: 'created_date'
}, {
  label: '最后编辑日期',
  value: 'last_edited_date'
}])

const handleCheckedData = (val)=> {
  isShowForm.test= val.includes('test') ? 0 : 1
  isShowForm.created_date = val.includes('created_date') ? 0 : 1
  isShowForm.last_edited_date = val.includes('last_edited_date') ? 0 : 1
}
const buttonRef = ref()
const popoverRef = ref()
const onClickOutside = () => {
  unref(popoverRef).popperRef?.delayHide?.()
}
</script>
<style lang="less" scoped>

</style>
